<template>
  <div class="Cities">
    <div class="tab">
      <span class="active" >境内</span>
      <span>境外·港澳台</span>
    </div>
    <div class="city">
      <h2>热门城市</h2>
      <ul class="city-ul">
        <li v-for="item in hotCities" :key="item.id">
          <span @click="selectCity(item.name)">{{item.name}}</span>
        </li>
      </ul>
      <div>
        <h2>字母排序</h2>
        <ul class="px-3 sort">
          <li v-for="(item,index) in cities" :key="index">
            <span @click="jump(index)">{{index}}</span>
          </li>
        </ul>
      </div>
      <div v-for="(item,index) in cities" :key="index">
        <h2 :id="index">{{index}}</h2>
        <ul class="city-ul" >
          <li v-for="i in item" :key="i.id">
            <span @click="selectCity(i.name)">{{i.name}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Cities",
    data() {
      return {
        href:'/citylist/CityList'
      }
    },
    props:['cities', 'hotCities'],
    methods: {
      jump(i) {
        var ref = document.getElementById(i);
        ref.scrollIntoView({
          block: 'start',
          behavior: 'smooth' 
        })
      },
      selectCity(name) {
        console.log( name)
        localStorage.setItem('city', name)
      }
    },
  }
</script>


<style lang="less" scoped>
    .Cities {
      color: #fff;
      font-size: .28rem; 
    }
   .tab {
      display: flex;
      height: 0.4rem;
      line-height: .4rem;
      text-align: center;
      background-color: #00bcd4;
      padding: 0.2rem 1rem;
      span {
        color: #fff;
        width: 50%;
        border: 1px solid #fff;
        border-radius: 0.03rem;
      }
      span.active {
        background-color: #fff;
        color: #00bcd4;
      }
    }
    .city {
      color: #212121;
      h2 {
        font-weight: normal;
        font-size: .24rem;
        margin: 0.24rem 0.3rem;
      }
      .city-ul {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        background-color: #fff;
        li {
          width: 33.3%;
          height: 0.9rem;
          line-height: .9rem;
          font-size: .28rem;
          text-align: center;
          box-sizing: border-box;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          border-bottom: .02rem solid #ddd;
          border-right: .02rem solid #ddd;
        }
      }
      .sort {
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        li {
          width: 16.66%;
          height: 0.9rem;
          line-height: .9rem;
          font-size: .28rem;
          text-align: center;
        }
      }
    }
    .px-3 {
      padding: .3rem 0;
    }
</style>